<template>
  <certList @ch="hasBook" v-for="item in config" :type="item" />

  <div class="pt60 pb60" v-if="isEmpty">
    <Empty description="暂无证书" />
  </div>

</template>

<script lang="ts">
import { defineComponent ,ref} from "vue";
import { Empty } from "ant-design-vue";
import certList from "/@/components/certList.vue";

export default defineComponent({
  components: { Empty, certList },
  setup() {
    const config: Array<string> = [
      "cert",
      "titl",
      "safe",
      "spec",
      "tech",
      "prof",
    ];
    const isEmpty = ref(true)

    const hasBook = ()=>{
      isEmpty.value = false
    }
    return {
      config , isEmpty , hasBook
    };
  },
});
</script>

<style lang="less" scoped>
.certificate-list {
  > section {
    margin-bottom: 10px;

    > h2 {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;

      i {
        display: inline-block;
        height: 20px;
        padding: 0 6px;
        line-height: 19px;
        color: #386bf3;
        background: #f0f6fe;
        border-radius: 2px;
      }
    }

    .cer-boxList {
      padding: 24px;
      margin-bottom: 20px;
      border: 1px solid #eaeaea;

      > h3 {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
      }

      .cer-label {
        margin-bottom: 0;

        dd {
          padding-bottom: 10px;
          margin-bottom: 0;

          p {
            width: 50%;
            margin-bottom: 0;
          }

          &.dashed {
            padding-top: 10px;
            padding-bottom: 0;
            border-top: 1px dashed #e6e6e6;
          }
        }
      }
    }
  }
}

.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}
</style>
